<template>
	<view>
		<Search></Search>
		<Preference :preferenceList=preferenceList></Preference>
		<Shop></Shop>
		<view @click="scrollTop" :catchtouchmove="true">
			<Screening
				:sortlist=sortlist 
				:shaixuan=shaixuan 
				:person=person 
				id="boxFixed"
				:isfixed=isfixed>
			</Screening>
		</view>
		<view style="height: 50px;"></view>
		<Takeout></Takeout>
	</view>
</template>

<script>
	import {preferurl} from '../../api/request.js'
	import {listing} from '../../api/api.js'
	import Search from './components/search.vue'
	import Preference from './components/preference.vue'
	import Screening from './components/screening.vue'
	import Shop from './components/shopTitle.vue'
	import Takeout from './components/takeout.vue'
	export default {
		components:{
			Search,
			Preference,
			Screening,
			Shop,
			Takeout
		},
		data() {
			return {
				preferenceList:[],
				sortlist:[
					{
						'name':'综合排序',
						'screen':'_id',
						'nums':1
					},{
						'name':'起送价最低',
						'screen':'delivering',
						'nums':1
					},{
						'name':'配送费最低',
						'screen':'delivering',
						'nums':1
					},{
						'name':'人均高到低',
						'screen':'capita',
						'nums':-1
					},{
						'name':'人均低到高',
						'screen':'capita',
						'nums':1
					},
				],
				shaixuan:[
					{
						'title':'商家特色',
						'datas':[
							{
								'id':1,
								'sign':'duration',
								'name':'配送最快'
							},{
								'id':1,
								'sign':'deliver',
								'name':'0元起送'
							},{
								'id':1,
								'sign':'physi',
								'name':'免配送费'
							},
						]
					},
				],
				person:[
					{
						'title':'人均价',
						'datas':[
							{
								'name':'20元以下',
								'per':{
									'$lt':20
								}
							},{
								'name':'20-40元',
								'per':{
									'$lte':40,
									'$gte':20
								}
							},{
								'name':'40元以上',
								'per':{
									'$gt':40,
									
								}
							},
						]
					}
				],
				menutop:'',
				rollingDistanc:'',
				isfixed:false
			}
		},
		onLoad() {
			this.preference()
			//监听筛选组件距离顶部的位置
			const query = wx.createSelectorQuery()
			query.select('#boxFixed').boundingClientRect()
			query.exec((res)=>{
				this.menutop=res[0].top
			})
		},
		methods: {
			//点击筛选组件回到页面顶部
			scrollTop(){
				wx.pageScrollTo({
				  scrollTop: this.menutop,
				  duration: 300
				})
			},
			//监听页面滚动距离
			onPageScroll(e){
				this.rollingDistanc=e.scrollTop
			},
			async preference(){
				const res=await listing(preferurl)
				this.preferenceList=res[1].data
			}
		},
		//计算属性
		computed:{
			//监听筛选组件置顶和不置顶
			newpage(){
				//console.log('我是自动执行的...');
				//console.log('menutop',this.menutop);
				if(this.rollingDistanc >=this.menutop){
					//console.log('置顶');
					this.isfixed=true
				}else{
					//console.log('不置定');
					this.isfixed=false
				}
			}
		},
	}
</script>

<style scoped>
	
</style>
